<template>
  <n-layout has-sider position="absolute">
    <n-layout-sider
      :collapsed="collapsed"
      show-trigger
      collapse-mode="width"
      :collapsed-width="64"
      :width="220"
      bordered
      @collapse="collapsed = true"
      @expand="collapsed = false"
    >
      <div class="brand" @click="go('/')">
        <n-icon size="24"><Sparkles /></n-icon>
        <span v-if="!collapsed">Queue Admin</span>
      </div>
      <n-menu :collapsed="collapsed" :options="menu" :value="active" @update:value="onSelect" />
    </n-layout-sider>
    <n-layout>
      <n-layout-header bordered>
        <div class="header">
          <div class="left">
            <n-button text @click="toggleCollapsed">
              <n-icon size="20"><Menu /></n-icon>
            </n-button>
            <n-breadcrumb>
              <n-breadcrumb-item>Home</n-breadcrumb-item>
              <n-breadcrumb-item>{{ title }}</n-breadcrumb-item>
            </n-breadcrumb>
          </div>
          <div class="right">
            <n-switch :value="dark" size="small" :round="false" @update:value="toggleTheme">
              <template #checked>Dark</template>
              <template #unchecked>Light</template>
            </n-switch>
          </div>
        </div>
      </n-layout-header>
      <n-layout-content content-style="padding:16px;">
        <slot />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>
<script setup lang="ts">
import { ref, computed, h, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NMenu, NButton, NIcon, NSwitch, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
import { HomeOutline as Home, ConstructOutline as Tools, DocumentTextOutline as Doc, ReorderThreeOutline as Menu, SparklesOutline as Sparkles, SettingsOutline as Settings } from '@vicons/ionicons5'

const props = defineProps<{
  dark: boolean
}>()

const emit = defineEmits<{
  (e: 'update:dark', value: boolean): void
}>()

const router = useRouter()
const route = useRoute()
const collapsed = ref(false)

const menu = [
  { label: '仪表盘', key: '/', icon: () => h(NIcon, null, { default: () => h(Home) }) },
  { label: '任务', key: '/tasks', icon: () => h(NIcon, null, { default: () => h(Tools) }) },
  { label: '死信', key: '/dlq', icon: () => h(NIcon, null, { default: () => h(Doc) }) },
  { label: '设置', key: '/settings', icon: () => h(NIcon, null, { default: () => h(Settings) }) }
]

const active = computed(() => route.path)
const title = computed(() => ({ '/': '仪表盘', '/tasks': '任务', '/dlq': '死信', '/settings': '设置' } as any)[route.path] || '')

function onSelect(key: string) { router.push(key) }
function go(path: string) { router.push(path) }

function toggleTheme(value: boolean) {
  emit('update:dark', value)
}

function toggleCollapsed() {
  collapsed.value = !collapsed.value
}
</script>
<style scoped>
.brand { display:flex; align-items:center; gap:10px; padding:16px; cursor:pointer; font-weight:600; }
.header { display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
.left { display:flex; align-items:center; gap:12px; }
.right { display:flex; align-items:center; gap:12px; }
</style>

